<template>
  <view class="home">
    <view class="input-item u-flex-y-center u-flex-between">
      <text>姓名</text>
      <up-input border="none" v-model="form.real_name" input-align="right" placeholder="请输入姓名" />
    </view>
    <view class="input-item u-flex-y-center u-flex-between">
      <text>联系电话</text>
      <up-input border="none" v-model="form.user_phone" maxlength="11" type="number" input-align="right"
        placeholder="请输入联系电话" />
    </view>
    <view class="action-btn" @click="_signup">立即报名</view>
  </view>
  <back-page />
</template>

<script setup>
  import { ref } from 'vue';
  import { signup } from '../../config/api';
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    }
  })
  const form = ref({
    activity_id: props.id,
    real_name: '',
    user_phone: '',
  })
  // 报名
  const _signup = () => {
    signup(form.value).then(res => {
      uni.$u.toast(res.msg)
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    })
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #fff;
    min-height: 100vh;
  }

  .input-item {
    font-size: 28rpx;
    padding: 36rpx 0;
    margin: 0 20rpx;
    color: #000;
  }

  .input-item+.input-item {
    border-top: 2rpx solid #eee;
  }

  .action-btn {
    height: 90rpx;
    background: #F87610;
    border-radius: 50rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 30rpx;
    right: 30rpx;
    font-weight: 500;
  }
</style>